<template>
  <div class="item flex">
    <div>
      <input type="checkbox" v-model="data.isComplete" />
      <span>{{ data.text }}</span>
      <!-- <input v-show="isEditing" type="text" v-model="data.text" @keyup="sureEdit($event)"> -->
    </div>
    <div>
      <slot name="edit"></slot>
      <slot name="del"></slot>
    </div>
  </div>
</template>
 
<script>
export default {
  props: ["data"],
  data(){
      return {
          // isEditing:false
      }
  }
};
</script>
 
<style lang = "less" scoped>
.item {
  padding: 0 20px;
  background-color: #fff;
  height: 40px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.item [type="checkbox"] {
  margin-right: 20px;
}
</style>